<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">秒杀商品</section>
      <a-row :gutter="16">
        <!-- <a-col :span="5">
          <span class="label">ID：</span>
          <a-input :max-length="100" allow-clear v-model="orderId" placeholder="请输入Id" />
        </a-col> -->
        <a-col :span="5">
          <span class="label">商品名称：</span>
          <a-input :max-length="100" allow-clear v-model="name" placeholder="请输入商品名称" />
        </a-col>
        <!--  <a-col :span="5">
          <span class="label">商品分类：</span>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
            <a-select-option :value="1">测试数据</a-select-option>
          </a-select>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择">
            <a-select-option :value="1">测试数据</a-select-option>
          </a-select>
        </a-col> -->

        <a-col :span="5">
          <span class="label">状态：</span>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择状态">
            <a-select-option v-for="item in orderStatusEnums" :value="item.value" :key="item.value">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-col>

        <a-col :span="8">
          <a-button class="ml-18" type="primary" @click="search">查询</a-button>
          <a-button class="mx-8" @click="reset">重置</a-button>
          <a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
          <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
        </a-col>
      </a-row>
      <a-table
        class="mt-16 order-table"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
      >
        <template #picUrl="picUrl, data">
          <img :src='getPhotos(data.picUrl)' style='width: 100px;height: 100px'/>
        </template>
        <template #createTime="createTime, data">
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
        <template #action="action, data">
          <div class="flex items-center justify-between">
            <a-button @click="goCharts(data)" style="background: #32cd32" type="primary"> 编辑 </a-button>
            <a-button @click="delect(data)" class="ml-10 mr-10" type="danger"> 取消 </a-button>
            <!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
          </div>
        </template>
      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <create @upload="upload" ref="create"></create>
  </a-spin>
</template>
<script>
import create from './components/create.vue'
import { seckillpage,seckillDelete } from '@/api/index'
import { tableMixins } from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {
    create
  },
  data() {
    return {
      loading: false,
      tabs: 'select1',
      name: '',
      ceartTime: [undefined, undefined],
      status: null,
      name:'',
      orderStatusEnums: [{
      		value: 0,
      		name: '下架'
      	},
      	{
      		value: 1,
      		name: '上架'
      	}
      ],
      data: [],
      columns: [
        { title: '序号', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        { title: '商品ID', dataIndex: 'spuId', align: 'center', width: 140, scopedSlots: { customRender: 'spuId' } },
        {
          title: '商品名称',
          dataIndex: 'spuName',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'spuName' }
        },
        {
          title: '秒杀活动名称',
          dataIndex: 'name',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'name' }
        },
        { title: '商品图片', dataIndex: 'picUrl', align: 'center', width: 70, scopedSlots: { customRender: 'picUrl' } },
        // { title: '商品分类', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },
        { title: '上架时间', dataIndex: 'createTime', align: 'center', width: 70, scopedSlots: { customRender: 'createTime' } },
        { title: '状态', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },
        {
          title: '秒杀可售库存',
          dataIndex: 'stock',
          align: 'center',
          width: 70,
          scopedSlots: { customRender: 'stock' }
        },
        // { title: '库存单位', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },
        // { title: '销量', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.search()
  },
  methods: {
    getPhotos(img) {
      let list=img.split(',')
      return list[0]
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    upload() {
      this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `请确认是否取消该商品？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {


          this.loading = true
          seckillDelete({
            id: data.id
          })
            .then(res => {

              this.$message.success('删除成功！')
              this.search()
              this.loading = false
            })
            .finally(() => (this.loading = false))
        }
      })
    },
    goCharts(data) {
      this.$refs.create.open(data)
    },
    getEdit(data) {
      this.$refs.create.open(data)
    },
    getSearchParams() {
      console.log(this.vendorId)
      return {

        pageNum: this.pageNum,
        rowsNum: this.rowsNum,
        name:this.name,
        status:this.status,
        startTime: this.$utils.getStartTime(this.ceartTime[0]),
        endTime: this.$utils.getEndTime(this.ceartTime[1])
      }
    },
    getData() {
      this.loading = true
      seckillpage(this.getSearchParams())
        .then(data => {

          this.total = data.total
          this.data = data.list
        })
        .finally(() => (this.loading = false))
    },
    reset() {
      this.ceartTime = [undefined, undefined]
      this.name = ''

      this.status = ''
    }
  }
}
</script>
<style lang="less" scoped>
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}
</style>
